 <style lang="less">
@import './home.less';
@import '../../styles/common.less';
</style>
<template>
    <div class="home-main"
         v-if="flag == false">
        <div class="home-first">
            <div class="wid-big gg-class">
                <div class="hf-title">易腐垃圾总重量</div>
                <div class="hf-num">{{this.fivenum.perishable}} KG</div>
            </div>
            <div class="wid-sml gg-class">
                <div class="hf-title">今日易腐垃圾总重量</div>
                <div class="hf-num">{{this.fivenum.todayPerishable}} KG</div>
            </div>
            <div class="home-title gg-class">
                <div class="ht-text">{{shequ.name}}</div>
                <div class="ht-num">{{shequ.num}} 户</div>
            </div>
            <sele v-show="false"></sele>
            <div class="wid-big1 gg-class">
                <div class="hf-title">其他垃圾总重量</div>
                <div class="hf-num">{{this.fivenum.otherRubbish}} KG</div>
            </div>
            <div class="wid-sml1 gg-class">
                <div class="hf-title">今日其他垃圾总重量</div>
                <div class="hf-num">{{this.fivenum.todayOtherRubbish}} KG</div>
            </div>
        </div>
        <div class="home-second">
            <div class="hs-biao gg-class">
                <waste :waste="this.waste"></waste>
            </div>
            <div class="hs-biao gg-class">
                <div class="hs-title">最新数据</div>
                <div class="hs-scroll">
                    <scroll :scrolldata='this.scrolldata'></scroll>
                </div>

            </div>
        </div>
        <div class="home-third">
            <div class="ht-biao gg-class row-c">
                <twobing :twobing='this.twobing'> </twobing>
            </div>
            <!-- <div class="ht-biao gg-class">
			 <div class="ht-table-title">回收数据</div>
			 <div class="ht-table-text" style="overflow:auto">
				 <div class="htt-title">
					 <div class="htt-title-text">回收人员</div>
					 <div class="htt-title-text">已收(户)</div>
				 </div>
				<div class="htt-title" v-for="item of reData" :key="item">
					 <div class="htt-text">{{ item.recycler }}</div>
					 <div class="htt-text">{{ item.receivable }}</div>
				</div>

			 </div>
		 </div> -->
            <div class="ht-biao gg-class row-c">
                <column :column='column'></column>
            </div>
            <div class="ht-biao gg-class scale">
                <div class="tit">占比数据</div>
                <div class="item">正确率：{{scale.bengbuRate}}%</div>
                <div class="item">参与率：{{scale.participation}}%</div>
                <div class="item">知晓率：{{scale.know}}%</div>
                <!-- <onebing :onebing='onebing'></onebing> -->
            </div>
        </div>

    </div>
    <div v-else>
        欢迎登录村口管理平台
    </div>

</template>

<script>
import Request from '@/api/request.js'
import gcDustbinApi from '@/api/ckMachineCenter/MCmanagement.js'
import waste from '@/view/home/components/waste.vue'
import column from '@/view/home/components/column.vue'
import scroll from '@/view/home/components/scroll.vue'
import twobing from '@/view/home/components/twobing.vue'
// import onebing from '@/view/home/components/onebing.vue'
import { Message } from 'iview'
import RecyclingreducingApi from '@/api/RecordsCenter/Recyclingreducing.js'
import homeApi from '@/api/base_sys/home.js'
import sele from '@/view/test/city.vue'
export default {
	name: 'home',
	components: {
		waste,
		scroll,
		twobing,
		// onebing,
		sele,
		column
	},
	data() {
		return {
			scale: {},
			waste: [],
			column: [],
			shequ: {},
			scrolldata: '',
			twobing: '',
			//  onebing: '',
			fivenum: {},
			reData: [],
			formData: {
				code: '',
				machineCode: 9902,
				provid: '',
				cityid: '',
				distid: '',
				strtid: '',
				commid: '',
				comminid: ''
			},
			flag: false //判断是否为商户管理员的标志
		}
	},
	async created() {
		await setTimeout({}, 1000)
		let area = window.defArea
		this.formData.provid = area[0]
		this.formData.cityid = area[1]
		this.formData.distid = area[2]
		this.formData.strtid = area[3]
		this.formData.commid = area[4]
		this.formData.comminid = area[5]
		var user = JSON.parse(Vue.localStorage.get('user'))
		if (user.permissionList.length == 9) {
			this.flag = true
		} else {
			this.getTableData()
            
            this.wasteData()
            this.getFiveData()
            this.getColumn()
			 this.getScale()
		}
	},
	async mounted() {
		setTimeout({}, 1000)
		var user = JSON.parse(Vue.localStorage.get('user'))
		if (user.permissionList.length == 9) {
			this.flag = true
		} else {
			this.getQuart()
			 
			// setTimeout(() => {
			// 	this.wasteData()
			// }, 1000)
		}
	},
	methods: {
		getTableData() {
			const that = this
			homeApi
				.getinfo(that.formData)
				.then(res => {
					that.scrolldata = res.data
				})
				.catch(error => {
					Message.error(error)
				})

			homeApi
				.twobing(that.formData)
				.then(res => {
					that.twobing = res.data
				})
				.catch(error => {
					Message.error(error)
				})
			// RecyclingreducingApi.getPageList(that.formData)
			// 	.then(res => {
			// 		res.data.some((item, index) => {
			// 			that.waste.push(item)
			// 		})
            //         var result = that.waste.map(function(item) {
			// 			var dateParts = item.time.split('-')
			// 			return {
			// 				recycle: item.recycle,
			// 				time: dateParts[1] + '-' + dateParts[2],
			// 				unRecycle: item.unRecycle
			// 			}
			// 		})
            //         this.waste =  result
			//         console.log(that.waste,'11111111111111111111')
			// 	})
			// 	.catch(error => {
			// 		Message.error(error)
			// 	})
			// homeApi
			// 	.getnum(that.formData)
			// 	.then(res => {
			// 		// that.waste=res.data
			// 		that.fivenum = res.data
			// 	})
			// 	.catch(error => {
			// 		Message.error(error)
			// 	})
			// homeApi
			// 	.fourinfo(that.formData)
			// 	.then(res => {
			// 		let data = res.data
			// 		this.reData = data
			// 	})
			// 	.catch(error => {
			// 		Message.error(error)
			// 	})
		},
		async wasteData() {
			let that = this
			RecyclingreducingApi.getPageList(that.formData)
				.then(res => {
					res.data.some((item, index) => {
						that.waste.push(item)
					})
					console.log(that.waste, 'that.waste')
					var result = that.waste.map(function(item) {
						var dateParts = item.time.split('-')
						return {
							recycle: item.recycle,
							time: dateParts[1] + '-' + dateParts[2],
							unRecycle: item.unRecycle
						}
					})
                    this.waste =  result
                    console.log(result,'222222222222222222222')
				})
				.catch(error => {
					Message.error(error)
				})
		},
		//   获取小区及人数
		async getQuart() {
			let res = await Request('get', this.formData, 'sysUser/sysPlot')
			this.shequ = res.data[0]
		},
		// 获取柱状图数据
		async getColumn() {
			let res = await Request('get', this.formData, 'ckScreen/bengbu')
			
			// this.onebing = res.data
			if (res !== undefined) {
				this.column = res.data
			}
		},
        // 获取最上方五个数据
        async getFiveData(){
            let res = await Request('get',this.formData,'ckScreen/Record')
            console.log(res, '111111111111111111111')
            if (res !== undefined) {
				this.fivenum = res.data
			}
        },
		// // 占比数据
		async getScale() {
			let res = await Request(
				'get',
				this.formData,
				'ckScreen/bengbu/rate'
			)
			console.log(res, '22222222222222222222222')
			if (res !== undefined) {
				for (let index in res.data) {
					res.data[index] = res.data[index].toFixed(2)
				}
				this.scale = res.data
			}
		}
	}
}
</script>
<style lang="less">
.htt-text {
	font-size: 1em;
}
.scale {
	.tit {
		width: 100%;
		font-size: 1vw;
		// font-weight: bold;
		padding-left: 1vw;
		// padding-top: 1.8vh;
		box-sizing: border-box;
		margin-bottom: 5vh;
         color: rgb(30,30,30);
         font-weight:550;
	}
	> .item {
		width: 100%;
		height: 3em;
		font-size: 1.5em;
		padding-left: 6vw;
		box-sizing: border-box;
         color: rgb(181,186,195);
	}
}
</style>
